import {View, Text, ScrollView} from "@tarojs/components"
import {useEffect, useState} from "react";
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";
import Taro, {usePullDownRefresh} from "@tarojs/taro";
import {useEventBusSubscribeDelay} from "../../envent_bus/event_bus";
import {OrderFinishBackMyOrders} from "../../envent_bus/events";
import styles from "../refund_orders_page/refund_orders_page.module.scss";
import globalData from "../../global_data";

const refundOrdersPage = () => {
  const [orderList, setOrderList] = useState<any>([]);
  const [selectTab, setSelectTab] = useState(0);  //0表示全部，1表示已退款，2表示退款中
  const [refundingList, setRefundingList] = useState<any>([]);
  const [refundedList, setRefundedList] = useState<any>([]);
  const OrderFinishBackMyOrdersListener = useEventBusSubscribeDelay<OrderFinishBackMyOrders>(OrderFinishBackMyOrders.eventName);
  useEffect(() => {
    getOrderList();
  }, []);

  usePullDownRefresh(() => {
    if (selectTab === 0) {
      getOrderList();
    } else if (selectTab === 1) {
      getRefundedRecordClick();
    } else {
      getRefundingRecordClick();
    }

    setTimeout(() => {
      Taro.stopPullDownRefresh();
    }, 1000);
  })

  const getOrderList = () => {
    request({
      url: apis.GET_APP_REFUND_ORDERS,
      data: {
        id: globalData.userInfo.id,
      },
      pureData: false
    }).then(res => {
      if (res.code === 200) {
        setOrderList(res.data);
      }
    })
  };

  const getAllOrderListClick = () => {
    setSelectTab(0);
    getOrderList();
  }

  const getRefundedRecordClick = () => {
    setSelectTab(1);
    showRefundedOrderList();
  }

  const getRefundingRecordClick = () => {
    setSelectTab(2);
    showRefundingOrderList();
  };


  const showRefundedOrderList = () => {
    const refundedOrderList = orderList.filter(item => {
      if (item.orderStatus === 'REFUNDED') {
        return item;
      }
    });
    setRefundedList(refundedOrderList);
  }

  const showRefundingOrderList = () => {
    const refundingOrderList = orderList.filter(item => {
      if (item.orderStatus === 'REFUNDING') {
        return item;
      }
    });
    setRefundingList(refundingOrderList);
  }


  const toOrderDetail = (item) => {
    let data = JSON.stringify(item);
    Taro.navigateTo({
      url: `../order_detail/order_detail?data=${encodeURIComponent(data)}`
    })
    OrderFinishBackMyOrdersListener(() => {
      getOrderList();
    })
  }

  return (
    <View className={styles.container} style={{position: "absolute"}}>
      <View className={styles.page_header_Tab}>
        <View className={styles.tab_item} onClick={getAllOrderListClick}>
          <Text
            className={`styles.tab_item_text ${selectTab === 0 ? 'color-primary-text' : 'color-third-text'}`}>全部订单</Text>
          <View style={{display: selectTab === 0 ? 'block' : 'none'}} className={styles.tab_item_selected}/>
        </View>

        <View className={styles.tab_item} onClick={getRefundedRecordClick}>
          <Text
            className={`styles.tab_item_text ${selectTab === 1 ? 'color-primary-text' : 'color-third-text'}`}>已退款订单</Text>
          <View style={{display: selectTab === 1 ? 'block' : 'none'}} className={styles.tab_item_selected}/>
        </View>

        <View className={styles.tab_item} onClick={getRefundingRecordClick}>
          <Text
            className={`styles.tab_item_text ${selectTab === 2 ? 'color-primary-text' : 'color-third-text'}`}>退款中订单</Text>
          <View style={{display: selectTab === 2 ? 'block' : 'none'}} className={styles.tab_item_selected}/>
        </View>


      </View>

      <ScrollView scrollY={true} className={styles.show_order_list_card}>
        {(orderList && orderList.length > 0 && selectTab === 0) && orderList.map(item => {
          return (
            <View onClick={() => {
              toOrderDetail(item)
            }} style={{marginBottom: "30rpx"}} className={styles.log_list_item}>
              <View className={styles.log_list_item_left}>
                <Text style={{marginBottom: "12rpx", fontSize: "32rpx"}}>{item.title}</Text>
                <Text style={{
                  marginBottom: "12rpx",
                  fontSize: "28rpx"
                }}>{item.id ? '订单号：' + item.id : ''}</Text>
                <Text className="text-tiny color-fourth-text">{item.createdTime}</Text>
              </View>
              <View className={styles.log_list_item_right}>{item.payment}元</View>
              <View
                style={{
                  display: item.orderStatus === 'REFUNDING' ? 'block' : 'none',
                  color: 'rgb(7,193,96)'
                }}>退款中</View>
              <View
                style={{display: item.orderStatus === 'REFUNDED' ? 'block' : 'none', color: '#FDD106'}}>已退款</View>

            </View>
          )
        })}

        {(refundedList && refundedList.length > 0 && selectTab === 1) && refundedList.map(item => {
          return (
            <View onClick={() => {
              toOrderDetail(item)
            }} style={{marginBottom: "30rpx"}} className={styles.log_list_item}>
              <View className={styles.log_list_item_left}>
                <Text style={{marginBottom: "12rpx", fontSize: "32rpx"}}>{item.title}</Text>
                <Text style={{
                  marginBottom: "12rpx",
                  fontSize: "28rpx"
                }}>{item.id ? '订单号：' + item.id : ''}</Text>
                <Text className="text-tiny color-fourth-text">{item.createdTime}</Text>
              </View>
              <View className={styles.log_list_item_right}>{item.payment}元</View>
              <View
                style={{color: '#FDD106'}}>已退款</View>
            </View>
          )
        })}

        {(refundingList && refundingList.length > 0 && selectTab === 2) && refundingList.map(item => {
          return (
            <View onClick={() => {
              toOrderDetail(item)
            }} style={{marginBottom: "30rpx"}} className={styles.log_list_item}>
              <View className={styles.log_list_item_left}>
                <Text style={{marginBottom: "12rpx", fontSize: "32rpx"}}>{item.title}</Text>
                <Text style={{
                  marginBottom: "12rpx",
                  fontSize: "28rpx"
                }}>{item.id ? '订单号：' + item.id : ''}</Text>
                <Text className="text-tiny color-fourth-text">{item.createdTime}</Text>
              </View>
              <View className={styles.log_list_item_right}>{item.payment}元</View>
              <View
                style={{
                  color: 'rgb(7,193,96)'
                }}>退款中</View>
            </View>
          )
        })}

      </ScrollView>

    </View>
  )
};
export default refundOrdersPage;
